<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <!-- <div v-if="model.authStatus=='3'" class="revisedContent">驳回原因：请上传清晰的身份证</div> -->
        <!-- <h3 class="title">基本信息</h3> -->
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="组织名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <span class="ant-form-text">{{model.orgName}} </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <span class="ant-form-text">{{model.id}} </span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="姓名"  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contact">
              <a-input v-model="model.contact" placeholder="请输入姓名" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="手机号"  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPhone">
              <a-input v-model="model.contactPhone" placeholder="请输入手机号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardNo">
              <a-input v-model="model.idCardNo" placeholder="请输入身份证号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="qq">
              <a-input v-model="model.qq" placeholder="请输入QQ" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="邮箱"  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
              <a-input v-model="model.email" placeholder="请输入邮箱" />
            </a-form-model-item>
          </a-col>
          
          <a-col :span="24">
            <a-form-model-item label="国家" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="country">
               <j-dict-select-tag v-model="model.country" placeholder="请输入国家" dictCode="shop_country"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="运营平台" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <!-- <a-checkbox-group v-model="model.operator_type" name="checkboxgroup" :options="operatorData" /> -->
              <!-- <j-checkbox v-model="model.operator_type" :options="operatorData"/>     -->
              <j-multi-select-tag
                v-model="model.operationPlatform"
                dictCode="finance_logistics_ec_auth_platform"
                placeholder="请选择运营平台">
              </j-multi-select-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
         <a-divider />
        <a-row>
          <h3 class="title">证件信息</h3>     
          <a-col :span="24">
          <a-col :span="14">
            <a-form-model-item label="身份证"  :labelCol="labelColIdCard" :wrapperCol="wrapperColIdCard" prop="idCardImg1">
              <j-image-upload :isMultiple="false" v-model="model.idCardImg1" class="idCardImgBack"></j-image-upload>
              <div class="idCardImgBackdemo">
                <div>
                  <img :src="idCardImgBackImg" width="93" height="58" />
                </div>
                <p>
                <span>示例图</span>
                <span>
                  <a-icon type="search"></a-icon>
                </span>
              </p>
              </div>
               <div class="fontTip">请上传您的身份证</div> 
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCardImg2">
              <j-image-upload :isMultiple="false" v-model="model.idCardImg2" class="idCardImgBack"></j-image-upload>
              <div class="idCardImgBackdemo">
                <div>
                  <img :src="idCardImgFrontImg" width="93" height="58" />
                </div>
                <p>
                <span>示例图</span>
                <span>
                  <a-icon type="search"></a-icon>
                </span>
              </p>
              </div>
            </a-form-model-item>
          </a-col>
           </a-col>
          <a-col :span="14">
            <a-form-model-item label="合同" :labelCol="labelColIdCard" :wrapperCol="wrapperColIdCard" prop="businessContract">
              <j-image-upload :isMultiple="false" v-model="model.businessContract" class="idCardImgBack"></j-image-upload>
            </a-form-model-item>
          </a-col>    
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'BaseSettleOrgPersonalAuth',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    model:{
      type:Object,
     default:()=>{
          return { }
        }
    }
  },
  data() {
    return {
      // model: {
      //   authType:'0',
      //   izSamePerson:'1',
      // },
      initAuthType:'0',
      orgName:'',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelColIdCard: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
      wrapperColIdCard: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
      confirmLoading: false,
      validatorRules: {
        contact: [{ required: true, message: '请输入联系人姓名' }],
        email: [
          { required: true, message: '请输入邮箱' },
          { required: false, type: 'email', message: '邮箱格式不正确' },
        ],
        idCardNo:[
          { required: true, message: '请输入身份证号'},
          { validator: this.validateIdCard }
        ],
        contactPhone: [{ required: true, message: '请输入联系人手机号'}, { validator: this.validateMobile }],
        companyName: [{ required: true, message: '请输入公司名称' }],
        companyCode: [{ required: true, message: '请输入统一社会信用代码'}],
        companyLegalPerson: [{ required: true, message: '请输入法定代表人'}],
        companyRegDate: [{ required: true, message: '请选择公司成立时间',}],
        companyRegAddress: [{ required: true, message: '请输入公司注册地址',  }],
        companyAddress: [{ required: true, message: '请输入公司办公地址' }],
        companyIdPhoto: [{ required: true, message: '请上传营业执照'}], 
        authorizationLetter: [{ required: true, message: '请上传授权书' }], 
        idCardImg1: [{ required: true, message: '请上传身份证人像面' }],
        idCardImg2: [{ required: true, message: '请上传身份证国徽面'}],

      },
      idCardImgBackImg: require('@/assets/idCardImgBack.png'),
      idCardImgFrontImg: require('@/assets/idCardImgFront.png'),
      url: {
        // add: '/finance/baseSettlementOrgUser/add',
        commit: '/finance/baseSettlementOrgAuth/commit',
        queryById: '/finance/baseSettlementOrgAuth/queryById',  //通过id查询组织认证信息
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) { 
      //this.model = Object.assign({}, record)
      // this.model.id=record.id
      this.orgName=record.name
      this.getBaseSettlementOrgAuth(record.id)
      this.visible = true
    },
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[25789]|7[0135678]|9[89])\d{8}$/).test(value)) {
        callback()
      } else {
        callback('手机号码格式不正确!')
      }
    },
    validateIdCard(rule, value, callback) {
        if (!value || new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
          callback();
        } else {
          callback("您的身份证号码格式不正确!");
        }
      },
    //获取认证信息
    getBaseSettlementOrgAuth(id){
      const that=this
      getAction(that.url.queryById, {id: id})
         .then(res=>{
          if(res.success){
             that.model=res.result
             that.initAuthType=res.result.authType
          }else{
            that.$message.warning(res.result)
          }
         })
    },

    submitForm() {
      const that = this
        //个人：1,2     //企业认证:是同一人:1,2  不是同一人：1,2，3,4
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          that.$emit('loadingCallback',true)     
            httpAction(this.url.commit, this.model, 'post')
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                 that.confirmLoading = false
                 that.$emit('loadingCallback',false)     
              })
        }
      })
    },
   
  },
//    watch:{
//       'model.authType':{
//           handler(newValue,oldValue){
//             const d=this.initAuthType
//             debugger
//             if(newValue !== oldValue){
//               //如果初始是个人认证，清空企业认证中的某些字段
//                if(this.initAuthType=='0'){
                   
//                }
//             }
//           },
//           deep:true
//       }
//     }
}
</script>
<style scoped>
.title {
  font-weight: bold;
  margin-left: 3%;
}
.fontTip{
  font-size: 12px;
  color: #a1a1a1;
  width: 100%;
  float: left;
  line-height: initial;
}
.operating {
  padding-right: 30px;
}
.revisedContent {
  margin-bottom: 15px;
  width: 100%;
  background: #fef1e1;
  color: #f59a23;
  font-size: 12px;
  padding: 10px 15px;
}
.idCardImgBack {
  display:inline-flex;
  float: left;
}
.idCardImgBackdemo {
  display: inline-block;
  width: 102px;
  height: 103px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  text-align: center;
  margin-left: 15px;
  padding: 5px 0;
}
.idCardImgBackdemo > p > span {
  margin: 0 3px;
  color: #c6c6c6;
}
</style>